//<style lang="stylus" rel="stylesheet/stylus">
//@import "../../assets/stylus/mixin.styl";
//.list{
//  display: flex;
//  position: absolute;
//  word-big()
//}
//</style>

//主色调
main-color = #1f1a3f;
vice-color = #bc7347;
sec-color = #721fd9;
gradient-color = -webkit-linear-gradient(top, #923df0, #721fd9);
vice-gradient-color = -webkit-linear-gradient(top, #bc7347, #bc7347);

//灰度级
black = #000;
first-ash = #333;
second-ash = #666;
third-ash = #999;
white = #fff;

//背景颜色
bk-color = #f9f9f9;
border-color = #f5f5f5;

//线的颜色
border-color = #f7f7f7;

//列表条
cell-height = 11.8vw
cell-icon-width = 6vw
cell-margin = 10px
btn-icon-width = 6vw

// 水平线
divider() {
  height 1px
  width vw(330)
  background-color border-color
}

space() {
  height 2.6vw
  width 100vw
  background-color border-color
}

//字号
word10 = 2.6vw;
word12 = 3.2vw;
word14 = 3.7vw;
word16 = 4.2vw;
word18 = 4.8vw;
word20 = 5.3vw;
word24 = 6.4vw;
word28 = 7.5vw;
//颜色
grayF = #fff
gray3 = #333
gray6 = #ff0036
gray0 = #000
.p1 {
  font-size 4.8vw
  color gray6
}

.p2 {
  font-size 3.7vw
  color gray6
}

.p3 {
  font-size 2.6vw
  color gray0
}

.p4 {
  font-size (8 / 3.75) vw
  color gray0
}

.p6 {
  font-size 4vw
  color gray6
  padding 0 1vw
}

.p7 {
  font-size word20
  color grayF
}

//行高
.line1 {
  line-height 1
}

.line12 {
  line-height 1.2
}

.line14 {
  line-height 1.4
}

.line1 {
  line-height 1
}

.line1 {
  line-height 1
}

.line16 {
  line-height 1.6
}

.line18 {
  line-height 1.8
}

.line2 {
  line-height 2
}

//其它字号(字号|颜色)普通单位
word(size, color) {
  font-size: size;
  color: color;
}

//其它字号(字号|颜色)px转vw
word-vw(size, color) {
  font-size: (size / 3.75) vw;
  color: color;
}

//下边框线(颜色|宽度)
bor-b(color = border-color, width = 1px, style = solid) {
  border-bottom: width style color;
}

//上边框线
bor-t(color = border-color, width = 1px, style = solid) {
  border-top: width style color;
}

//左边框线
bor-l(color = border-color, width = 1px, style = solid) {
  border-left: width style color;
}

//右边框线
bor-r(color = border-color, width = 1px, style = solid) {
  border-right: width style color;
}

//全边框
border(color = border-color, width = 1px, style = solid) {
  border: width style color;
}

//边框圆角
border-radius(deg) {
  -webkit-border-radius: deg;
  -moz-border-radius: deg;
  -o-radius: deg;
  border-radius: deg;
}

//背景图片(名称|文件格式)
bg-img(name, format) {
  background-image: url('http://img.c.irunyan.com/img/' + name + '.' + format);
}

//transition
transition(part, time, vol = linear) {
  transition: part time vol;
  -webkit-transition: part time vol;
  -moz-transition: part time vol;
  -o-transition: part time vol;
}

//  px转vw(单位转换)
vw(size) {
  (size / 3.75) vw;
}

//flex布局沿y轴
flex-y(justify = center, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: column nowrap;
  justify-content: justify;
  align-items: align
}

//flex布局沿x轴
flex-x(justify = space-between, align = center) {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: row nowrap;
  justify-content: justify;
  align-items: align
}

flex-center() {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  justify-content center
  align-items center
}

//文字省略号
ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//多行省略号
multi(row) {
  display: -webkit-box
  -webkit-box-orient vertical
  -webkit-line-clamp: row
  overflow: hidden
  text-overflow: ellipsis
  word-break: normal
  width: auto
  white-space: pre-wrap
  word-wrap: break-word
}

flex-around() {
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center
}

//渐变色
gradient(direction, colorStart, colorEnd) {
  background: -webkit-linear-gradient(direction, colorStart, colorEnd);
  background: linear-gradient(direction, colorStart, colorEnd);
  background: -moz-linear-gradient(direction, colorStart, colorEnd);
  background: -o-linear-gradient(direction, colorStart, colorEnd);
  background: -ms-linear-gradient(direction, colorStart, colorEnd);
}

//申请代理商底部按钮样式
btn-bottom() {
  position fixed
  bottom 0
  width 100vw
  display flex
  display -webkit-flex; /* 新版本语法: Chrome 21+ */
  height vw(55)
  align-items center
  justify-content space-around
  font-size word14
}

prev() {
  width vw(150)
  text-align center
  background-color #fff
  height vw(35)
  line-height vw(35)
  border-radius vw(15)
  font-size word14
}

next() {
  height vw(35)
  line-height vw(35)
  width vw(150)
  background gradient-color
  color #fff
  text-align center
  border-radius vw(15)
}

// 申请代理商顶部描述
applyTop() {
  display flex
  display -webkit-flex /* 新版本语法: Chrome 21+ */
  justify-content space-between
  font-size word12
  padding vw(5) vw(10)
  height vw(30)
  align-items flex-end
  color #666
}

//小杰按钮样式
out() {
  background-color #fff
  position fixed
  bottom 0
  width 100vw
  height vw(50)
  display flex
  display -webkit-flex /* 新版本语法: Chrome 21+ */
  align-items center
  justify-content center
}

//蛋糕实心
btn-primary() {
  width vw(120)
  height vw(40)
  line-height vw(40)
  text-align center
  border-radius vw(20)
  font-size word16
  background main-color
  color #fff
  box-sizing border-box
}

//空心
btn-reverse() {
  display flex
  display -webkit-flex /* 新版本语法: Chrome 21+ */
  align-items center
  justify-content center
  width 45vw
  border(main-color)
  border-radius vw(35)
  height vw(35)
  word-main()
  color main-color
  box-sizing border-box
}

